<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TestSite</title>
    <script src="js/userOps.js"></script>
    <script>
        function Login() {
            var name = document.getElementById("username").value;
            var psw = document.getElementById("password").value;
            document.getElementById("token").innerHTML = user_login(name, psw);
        }

        function AddChar() {
            var itemID = parseInt(document.getElementById("chat_itemid").value);
            var buyerID = parseInt(document.getElementById("chat_buyerid").value);
            var info = document.getElementById("chat_info").value;
            if (isNaN(itemID) || isNaN(buyerID)) {
                alert("Fill the blank")
            }
            char_add(document.getElementById("token").innerHTML, buyerID, itemID, info)
        }
        function getAllItem() {
            var ele = document.getElementById("div_all_list");
            ele.innerHTML = `<tr><th>id</th><th>ownerID</th><th>Description</th><th>Price</th><th>images</th></tr>`;
            items = item_get_all().items;
            if(items == null)
                    return;
            for (var i = 0; i < items.length; i++){
                // console.info(JSON.stringify(items[i]));
                imgs = items[i].images.split(",");
                console.info(imgs);
                str = "";
                str += "<tr>";
                str += "<td>"+ items[i].ID +"</td>";
                str += "<td>"+ items[i].ownerID +"</td>";
                str += "<td>"+ items[i].description +"</td>";
                str += "<td>"+ items[i].price +"</td>";
                str += "<td>";
                for(var j = 0; j < imgs.length; j++){
                    str += "<img width='200' id=\""  + gen_image_id(i,imgs[j]) + "\">";
                }
                str += "</td>";
                str += "<td>"+ items[i].status +"</td>";
                str += "</tr>";
                ele.innerHTML += str;
                console.info(str);
            }
            for (var i = 0; i < items.length; i++){
                for(var j = 0; j < imgs.length; j++){
                    getImage(imgs[j], document.getElementById(gen_image_id(i,imgs[j])));
                }
            }
        }
    </script>
</head>
<body>
<table border="1">
    <tr>
        <td>username</td>
        <td><input type="text" id="username"></td>
    </tr>
    <tr>
        <td>psw</td>
        <td><input type="password" id="password"></td>
    </tr>
    <tr>
        <td>token</td>
        <td>
            <div id="token"></div>
        </td>
    </tr>
    <tr>
        <td>ID</td>
        <td><input type="text" id="ID"></td>
    </tr>
    <tr>
        <td>ownerID</td>
        <td><input type="text" id="ownerID"></td>
    </tr>
    <tr>
        <td>description</td>
        <td><input type="text" id="description"></td>
    </tr>
    <tr>
        <td>price</td>
        <td><input type="text" id="price"></td>
    </tr>
    <tr>
        <td>images</td>
        <td><input type="text" id="images"></td>
    </tr>
    <tr>
        <td>status</td>
        <td><input type="text" id="status"></td>
    </tr>
    <tr>
        <td>Comments of this item</td>
        <td><input type="text" id="comments"></td>
    </tr>
</table>
<input type="button" value="Login" onclick="Login()">
<table>
    <tr>
        <th>ItemID</th>
        <th>BuyerID</th>
        <th>char info</th>
    </tr>
    <tr>
        <td><input type="text" id="chat_itemid"></td>
        <td><input type="text" id="chat_buyerid"></td>
        <td><input type="text" id="chat_info"></td>
    </tr>
</table>
<input type="button" value="Add chart" onclick="AddChar()">
<div id="list_chat"></div>

<input type="button" value="Get All items" onclick="getAllItem()">
<table border="1" id="div_all_list">
    <tr>
        <th>id</th>
        <th>ownerID</th>
        <th>Description</th>
        <th>Price</th>
        <th>images</th>
    </tr>
</table>
</body>
</html>